home *** CD-ROM | disk | FTP | other *** search
/ Personal Computer World 2009 February / PCWFEB09.iso / Software / Resources / Burning & Media / GB-PVR 1.2.13 / GBPVR10213.msi / Cabs.w1.cab / common.css600 < prev    next >
Encoding:
Text File  |  2007-12-20  |  14.7 KB  |  589 lines
  1. BODY {
  2.     /* 
  3.     In order to provide a fixed scrolling area with a header and footer,
  4.     the HTML tag must be styled.
  5.      */
  6.     margin:0;
  7.     border:0;
  8.     padding:0;
  9.  
  10.     height:100%; 
  11.     max-height:100%;
  12.  
  13.     background-color:#000060;
  14.     color:#CCF;
  15.  
  16.     /* set default font characteristics */
  17.     font-family:Verdana,"Trebuchet MS", Arial, sans-serif;
  18.     font-size:10px;
  19.  
  20.     /* no scrolling allowed for a fixed page */
  21.     overflow: hidden;
  22. }
  23.  
  24. A:link {color:#ffffff;}
  25. A:visited {color:#ffffff;}
  26. A:hover {text-decoration: none; color: #0000ff;}
  27. A:active {text-decoration: none; color: #ffffff;}
  28.  
  29. #HEADER {
  30.     /* 
  31.     This section contains the page title text and main navigation tabs.
  32.     This is also a fixed size area and must be styled as such.
  33.     Any other fixed elements below this must be positioned accordingly.
  34.     
  35.     The actual height is set at the bottom of the page where all fixed
  36.     height elements have their height attribute set.
  37.     This helps keep these measurements in one place so updating is
  38.     easier.
  39.      */
  40.     position:absolute; 
  41.     background:#0B2700 url("../graphics/main_bg.jpg") repeat-x left top;
  42.     top:0; 
  43.     left:0; 
  44.     width:100%; 
  45.  
  46.     /* no scrolling in the header. Any overlowed text will not be displayed.
  47.     This allows easier alignment of graphical elements within the header
  48.     as well as ensures no scrollbars will appear.
  49.      */
  50.     overflow:visible; 
  51.  
  52.     /* default text attributes */
  53.     color:#000000;
  54.     padding:10px 0px 2px 0px;
  55.     line-height:20px;
  56.  
  57.     /*
  58.     Graphical elements here such as a background image for the header
  59.     can be specified here.
  60.     */
  61. }
  62. #FIXED_DIV {
  63.     /*
  64.     This section contains the popup window for the reminders.
  65.     The actual content will be copied into it from the normal reminder area.
  66.     It is designed to be displayed directly over the actual reminder area.
  67.     In order to accomplish this it (and elements left of it)
  68.     must be given a predetermined width so its ultimate location can be
  69.     calculated using javascript.
  70.     Its top setting must be determined according to any fixed elements above
  71.     it (namely the header)
  72.     It is initially hidden until needed.
  73.     */
  74.     position: absolute;
  75.     display: block;
  76.  
  77.     left:320px;
  78.     top:92px;
  79.     width: 250px;
  80.     height:200px;
  81.     
  82.     border: 1px solid #333333;
  83.     border-top:0px;
  84.  
  85.     /* we want scrollbars if necessary */
  86.     overflow:auto;
  87.  
  88.     /*
  89.     although the content is using the same style as the regular reminder
  90.     area, we'll set a different background color for effect.
  91.      */
  92.     background-color: #0B2700;
  93.  
  94.     /* padding and margin is a little different due to IE/Firefox differences */
  95.     padding: 0px 0px 0px 4px;
  96.     margin-left:3px;
  97.  
  98.     /* force it to appear on top */
  99.     z-index:9990;
  100.  
  101.     /* initially hidden */
  102.     display:none;
  103. }
  104. #FIXED_DIV A {color: #000000; text-decoration:none;}
  105. #FIXED_DIV A:visited {color: #000000;} 
  106. #FIXED_DIV A:hover {text-decoration:underline;}
  107. #FIXED_DIV A:active {color: #000000;} 
  108.  
  109. #LOGO_HEADER {
  110.     /*
  111.     This DIV can contain an optional image to be displayed in the header area if desired.
  112.     Typically this would be the GB-PVR logo and would appear at the far left of the header.
  113.     This allows theme designers to use customized GB-PVR logos (or any other graphic) to
  114.     blend better with a graphical theme.
  115.     Must specify image dimensions to properly size this DIV.
  116.     */
  117.     display:inline;
  118.     float:left;
  119.     
  120.     /*
  121.     Set the dimensions so other elements will align to it.
  122.     Typically this would be the dimensions of the image to
  123.     appear here.
  124.     */
  125.     height:46px;
  126.     width:47px;
  127.  
  128.     background: url(../Graphics/logo_header.png) no-repeat left;
  129.     margin-top:-5px;
  130.     
  131.     /* if not using a graphic here make sure to hide this DIV */
  132.     display:none;
  133. }
  134. #HEADER_TEXT {
  135.     /* contains the GB-PVR header text
  136.     If using only graphics in the header, this DIV
  137.     can be hidden if desired so text is hidden.
  138.     */
  139.     margin-left:10px;
  140.     padding-top:3px;
  141.     color:#ffffff;
  142. }
  143. .textLarge {
  144.     /* Text used for the main GB-PVR logo lettering */
  145.     font-size:32px;
  146.     font-weight:bold;
  147.     color:#ffffff;
  148. }
  149. .textSmall {
  150.     /* Text used for the main GB-PVR logo 
  151.     small lettering underneath the main text
  152.     */
  153.     font-size:11px;
  154.     font-weight:normal;
  155.     padding-left:3px;
  156.     color:#ffffff;
  157. /*     line-height:23px; */
  158. }
  159.  
  160. #NAV_ROW {
  161.     /*
  162.     Main containing DIV for the navigation tabs. Must be
  163.     absolutely positioned. Its top value is set farther down
  164.     the page.
  165.     */
  166.     clear:both;
  167.     position:absolute;
  168.  
  169.     width:100%;
  170. }
  171. #NAV_ROW A {
  172.     /*
  173.     Styling for the navigation tabs. If using a graphical theme, a background
  174.     image can be used. If using simple text links without graphics, you can set
  175.     default styling for simple buttons here.
  176.     */
  177.     font-size: 11px;
  178.     font-weight:bold;
  179.     color: #000000;
  180.     text-decoration: none;
  181.  
  182.     display: block;
  183.     
  184.     border: 1px solid #000000;
  185.     margin: 4px -1px 0px 0px;
  186.     padding: 2px 6px 0px 6px;
  187.  
  188.     background-color: #0066EE;
  189.     
  190.     white-space: nowrap;
  191.     text-align: center;
  192.  
  193.     overflow: visible;
  194. }
  195. #NAV_ROW A:visited {color: #000000;}
  196. #NAV_ROW A:hover {background-color: #00BBFF;}
  197. #NAV_ROW A:active {color: #000000;}
  198.  
  199. #NAV_ROW .currentTab A {
  200.     /*
  201.     Styling for the tab for the current page. Usually this is highlighted
  202.     in some way to identify which page the user is on.
  203.     */
  204.     padding: 2px 6px 0px 6px;
  205.     margin-top:0px;
  206.     margin-left:0px;
  207.  
  208.     background-color: #00BBFF;
  209.     color: #000000;
  210.  
  211.     border: 3px solid #000000;
  212. }
  213. #NAV_ROW .currentTab A:visited {color: #000000;}
  214. #NAV_ROW .currentTab A:hover {color: #000000; background-color: #00BBFF;}
  215. #NAV_ROW .currentTab A:active {color: #000000;}
  216.  
  217. #NAV_GUIDE A, #NAV_RECORDINGS A, #NAV_SEARCH A, #NAV_VIDEO A, #NAV_MUSIC A, #NAV_PHOTO A {
  218.     /* consolidate attributes for all the main navigation tabs on the LEFT side */
  219.     float:left;
  220. }
  221. #NAV_CONFIG A, #NAV_LOGOUT A, #NAV_STATS A {
  222.     /* consolidate attributes for all the main navigation tabs on the RIGHT side */
  223.     float:right;
  224.     margin-right: 0px;
  225.     margin-left:-1px;
  226. }
  227. /*
  228. Set z-index values for each tab below so any overlapping is properly handled
  229. Depending on the style of the theme, this may not be necessary.
  230. */
  231. #NAV_RECORDINGS {
  232.     z-index:80;
  233. }
  234. #NAV_SEARCH {
  235.     z-index:70;
  236. }
  237. #NAV_VIDEO {
  238.     z-index:60;
  239. }
  240. #NAV_MUSIC {
  241.     z-index:50;
  242. }
  243. #NAV_PHOTO {
  244.     z-index:40;
  245. }
  246. /* right-aligned buttons */
  247. #NAV_CONFIG {
  248.     z-index:20;
  249. }
  250. #NAV_STATS {
  251.     z-index:30;
  252. }
  253. #NAV_LOGOUT {
  254.     z-index:40;
  255. }
  256. #DIV_DATELINE, #DIV_HEADER, #DIV_CONTENTS, #DIV_FOOTER {
  257.     /* 
  258.     These are the divider lines that appear between content sections.
  259.     They MUST be absolutely positioned to keep the scroll area properly positioned.
  260.  
  261.     They can individually be hidden if desired or completely themed with a graphical style.
  262.     If hidden, make sure to adjust absolute positioning of other affected sections.
  263.     */
  264.     position:absolute;
  265.     left: 0px;
  266.  
  267.     height:1px;
  268.     width:100%;
  269.  
  270.     color:#000000;
  271.     background-color:#000000;
  272.     overflow:hidden;
  273.     padding:0;
  274.     margin:0;
  275.  
  276.     z-index:500;
  277. }
  278. #DATELINE {
  279.     /* 
  280.     This DIV contains the server time (for all pages). Other content is variable by page.
  281.     It must be absolutely positioned because it is not part of the scrollable area.
  282.      */
  283.     position:absolute; 
  284.     width:100%;
  285.     
  286.     left:0px; 
  287.     
  288.     overflow: hidden;
  289.     background-color: #0B2700;
  290.     color:#000000;
  291.  
  292.     border-left: 1px solid #000000;
  293.     z-index:7;
  294. }
  295. #DATE_TIME {
  296.     /* Styling for the text area in #DATELINE. Typically server time and maybe current date */
  297.     position:absolute;
  298.     float:right;
  299.     top:0px;
  300.     right:0px;
  301.     float:right;
  302.     height:40px;
  303.     margin-right:3px;
  304.     overflow: hidden;
  305.     color:#ffffff;
  306. }
  307. .timeDiv {
  308.     /* styling for the server time */
  309.     font: 10px;
  310.     text-align:right;
  311.     padding-top:4px;
  312. }
  313. .viewingDate {
  314.     /* styling for the current date found underneath the server time */
  315.     font-size: 14px;
  316.     font-weight:bold;
  317.     padding-top:2px;
  318. }
  319. #REMINDER_LABEL {
  320.     /* 
  321.     Area containing the label text for the reminder area. This area can be
  322.     made clickable to show/hide the expanded popup div
  323.      */
  324.     position: relative;
  325.     float:left;
  326.     display: inline-block;
  327.  
  328.     top: 0px;
  329.     width: 60px;
  330.     height:40px;
  331.  
  332.     font-size: 11px;
  333.     margin-left:2px;
  334.     margin-right:5px;
  335.     _margin-right:0px;
  336.     padding-top:3px;
  337.     color:blue;
  338. }
  339. #REMINDER_LABEL A {
  340.     /* styling for text links within #REMINDER_LABEL */
  341.     text-decoration: none;
  342.     display: inline-block;
  343.     color: #0000ff;
  344. }
  345. #REMINDER_LABEL A:visited {color: #0000ff;} 
  346. #REMINDER_LABEL A:hover {text-decoration:underline;} 
  347. #REMINDER_LABEL A:active {color: #0000ff;} 
  348. #REMINDER_DIV {
  349.     /* 
  350.     Contains current reminders. This div will be hidden when there are no reminders.
  351.      */
  352.     position: relative;
  353.     display:inline-block;
  354.     float:left;
  355.  
  356.     top: 0px;
  357.     width:220px;
  358.     
  359.     font-size: 11px;
  360.     overflow: auto;
  361.     margin-left:5px;
  362.     padding: 0px 0px 0px 0px;
  363. }
  364. #REMINDER_DIV A {
  365.     /* default styling for the links in the reminder area */
  366.     text-decoration:none;
  367.     color: #000000;
  368. }
  369. #REMINDER_DIV a:visited {color: #000000;} 
  370. #REMINDER_DIV a:hover {text-decoration:underline;}
  371. #REMINDER_DIV a:active {color: #000000;} 
  372. .timeHighlight {
  373.     /* styling for the show time for a reminder */
  374.     font-weight:bold;
  375. }
  376. #CONTENTS {
  377.     /* 
  378.     This is the main section containing the individual page contents. Because of the fixed positioning of
  379.     the header and footer area, this section is scrollable. This would perform similar to a framed page.
  380.     The top AND bottom values must be specified because of the fixed styling.
  381.     
  382.     Top would typically be the height of all the fixed elements above it.
  383.     Bottom is typically the height of the footer.
  384.     
  385.     Top and Bottom values are set within the style sheet of each individual page seeing as each page's content
  386.     can vary.
  387.      */
  388.     position:fixed; 
  389.  
  390.     left:0;
  391.     right:0; 
  392.  
  393.     /* must be auto to enable scrolling */
  394.     overflow:auto;
  395.     
  396.     background-color:#000060;
  397.     clear: both;
  398.  
  399.     /*
  400.     Must specify these values in IE for proper scrolling behavior.
  401.     (Setting these values in firefox results in scrolling problems.)
  402.     It's a hack, but it works. Much simpler than designing and maintaining
  403.     separate style sheets for IE and Firefox!
  404.      */
  405.     _height:100%;
  406.     _width:100%; 
  407. }
  408. #FOOTER {
  409.     /*
  410.     footer must be absolutely sized and positioned in order to maintain the fixed
  411.     scrolling behavior of the overall page. Other fixed elements must adjust according to
  412.     the height of this section.
  413.     */
  414.     width:100%;
  415.  
  416.     position:absolute; 
  417.     display: inline-block;
  418.  
  419.     bottom:0px; 
  420.     left:0px;
  421.     right:0;
  422.  
  423.     overflow:auto; 
  424.     background-color:#000060;
  425.     white-space: nowrap;
  426. }
  427. #FOOTER_LEFT {
  428.     /* The footer is divided into a left and right section */
  429.     float:left;
  430.     left:0px;
  431.  
  432.     white-space: nowrap;
  433.     z-index:5004;
  434. }
  435. #FOOTER_RIGHT {
  436.     /*
  437.     The footer is divided into a left and right section.
  438.     The right section is right-aligned for aesthetics.
  439.     */
  440.     float:right;
  441.     top:0px;
  442.     right:0px;
  443.     z-index:5002;
  444. }
  445. .legendPending, .legendInProgress, .legendAvailable, .legendFailed, .legendConflict, .legendReoccurring, .legendDeleted {
  446.     /*
  447.     Styling for the small coloring guide legends in the footer area.
  448.     */
  449.     display: inline-block;
  450.     float:left;
  451.  
  452.     border:1px solid #000000;
  453.     margin:5px 0px 0px 5px;
  454.     padding:2px 8px 2px 8px;
  455.     white-space: nowrap;
  456. }
  457. .legendPending {
  458.     background-color: #FF9944;
  459.     color:#000000;
  460. }
  461. .legendInProgress {
  462.     background-color: #33EE00;
  463.     color:#000000;
  464. }
  465. .legendAvailable {
  466.     background-color: #33AA11;
  467.     color:#000000;
  468. }
  469. .legendFailed {
  470.     background-color: #FF0000;
  471.     color:#000000;
  472. }
  473. .legendConflict {
  474.     background-color: #FFFF11;
  475.     color:#000000;
  476. }
  477. .legendReoccurring {
  478.     background-color: #CC77BB;
  479.     color:#000000;
  480. }
  481. .legendDeleted {
  482.     background-color: #CCCC99;
  483.     color:#000000;
  484. }
  485. #CREDITS_LINKS {
  486.     /* Styling for the main credits and GB-PVR links within the footer area. */
  487.     padding: 15px 5px 0px 0px;
  488.     font-size:9px;
  489.     bottom:0px;
  490.     overflow:visible;
  491.     font-variant: normal;
  492.     color: #606060;
  493. }
  494. #CREDITS_LINKS A {color: #0000ff;    text-decoration: none;}
  495. #CREDITS_LINKS A:visited {color: #0000ff;}
  496. #CREDITS_LINKS A:hover {color: #0000ff; text-decoration: underline;}
  497. #CREDITS_LINKS A:active {color: #0000ff;}
  498.  
  499. /*
  500. *********************************************************************************************************************
  501. Absolute Positioning and Height                                                            
  502.  
  503. These values are consolidated into one place to make it easier to change size attributes seeing as changing
  504. any one of these values can affect all the others.
  505.  
  506. These values are the key values for maintaining proper size, positioning and scrolling behavior.
  507. *********************************************************************************************************************
  508. */
  509.  
  510. #HEADER {
  511.     /* 
  512.     The height of the entire header area from page top to the bottom of the navigation tabs.
  513.     The actual nav tabs are floated within this div.
  514.     */
  515.     height:92px;
  516. }
  517. #NAV_ROW {
  518.     /* 
  519.     The is the row containing the navigation tabs.
  520.     It is typically positioned at the bottom of the header
  521.     */
  522.     top:62px;
  523. }
  524. #NAV_ROW, #NAV_ROW A {
  525.     /* determines the height of the main navigation tabs */
  526.     height:32px;
  527. }
  528. #DIV_DATELINE {
  529.     /*
  530.     This is the divider line between the main header above and the section containing the server time
  531.      */
  532.     top:91px;
  533. }
  534. #DATELINE {
  535.     /* 
  536.     This is the section containing the server time, date, etc.
  537.     */
  538.     top:92px;
  539.     height:40px;
  540. }
  541. #REMINDER_DIV {
  542.     /* Height of these individual elements would be the same as #DATELINE above */
  543.     height:40px;
  544. }
  545. #DIV_HEADER {
  546.     /*
  547.     This is the divider line between the date section above and the main content area
  548.      */
  549.     top:132px;
  550. }
  551. #DIV_CONTENTS {
  552.     /*
  553.     This is A divider line between any fixed top section within the content area and the content itself.
  554.     This is typically used in the guide page to separate the showtime header from the content.
  555.     In other pages which don't need this functionality it can simply be hidden.
  556.      */
  557.     top:133px;
  558. }
  559. #CONTENTS {
  560.     /* 
  561.     This is the main content area.
  562.     To ensure proper scrolling behavior it MUST be absolutely positioned.
  563.     Both top and bottom values must be specified.
  564.     Top value would be the height of all foxed content above it.
  565.     Bottom value would be the height of the footer area minus the height of the divider    for the footer.
  566.      */
  567.     top:133px;
  568.     bottom:49px;
  569. }
  570. #DIV_FOOTER {
  571.     /* 
  572.     The divider between the main content area and the footer.
  573.     It must be absolutely positioned.
  574.     The bottom value would typically be the same as the height of the footer
  575.     */
  576.     bottom:50px;
  577. }
  578. #FOOTER {
  579.     /* 
  580.     Fixed area at the bottom of every page. This must be absolutely posiitioned for proper scrolling
  581.     Certain content will always be contained in this section such as standard GB-PVR documentation links and credits,
  582.     but it contains and left and right section which can be customized on each page.
  583.     
  584.     If the size of the footer changes make sure to adjust the content area's bottom value as well as the
  585.     divider section for the footer.
  586.     */
  587.     height:50px;
  588. }
  589.